import React, { useState, useEffect } from 'react';
import {
  Table,
  Tag,
  Space,
  Radio,
  Button,
  Select,
  Input,
  Form,
  DatePicker,
  Upload,
  message,
} from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { history } from 'umi';
import request from '../../../../http';
import './index.css';

const { Option } = Select;
const { RangePicker } = DatePicker;
const { TextArea } = Input;

const LeaveApplication = () => {
  const columns = [
    {
      title: '操作人',
      dataIndex: '操作人',
      key: '1',
    },
    {
      title: '操作事项',
      dataIndex: '操作事项',
      key: '2',
    },
    {
      title: '操作时间',
      dataIndex: '操作时间',
      key: '3',
    },
    {
      title: '说明',
      dataIndex: '说明',
      key: '4',
    },
  ];

  //获取填写数据
  const [zhuTi, setzhuTi] = useState(0);
  const [startDate, setstartDate] = useState('');
  const [reason, setreason] = useState(0);
  const [file, setfile] = useState(0);
  const [endDateTime, setendDateTime] = useState('');
  const [gexplain, setgexplain] = useState(0);

  //获取传过来的数据
  const state = history.location.query.state;
  const reason1 = history.location.query.reason;
  const theme = history.location.query.theme;
  // const startDateTime = history.location.query.startDateTime;
  // const endDateTime = history.location.query.endDateTime;
  const explain = history.location.query.explain;

  const [data, setdata] = useState([]);

  //学生信息
  const [student, setstudent] = useState([{}]);

  //周期搜索
  useEffect(() => {
    //学生信息/ack/student/insert
    request.post('/ack/student/insert').then((res) => {
      // console.log("学生信息请求成功", res.data)
      const arr = res.data.map((studentObj) => {
        return {
          userName: studentObj.userName,
          account: studentObj.account,
          dkey: studentObj.dkey,
          gkey: studentObj.gkey,
          gradeKey: studentObj.gradeKey,
          name: studentObj.name,
          teacherName: studentObj.teacherName,
        };
      });
      setstudent(arr);
    });
  }, []);

  //文件上传
  const props = {
    name: 'file',
    action: 'http://10.8.21.168:8082/common/a_t_s/upload',
    headers: {
      authorization: 'apiKey',
    },
    onChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 上传成功`);
        const fileID = info.file.response.data.annexId;
        setfile(fileID);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传失败`);
      }
    },
  };

  //获取开始日期
  const startDateChange = (date, dateString) => {
    setstartDate(dateString);
  };

  //获取结束日期
  const endDateChange = (date, dateString) => {
    setendDateTime(dateString);
  };

  //获取单选框的值
  const onChangeRadio = (e) => {
    console.log(parseInt(e.target.value));
    setreason(parseInt(e.target.value));
  };

  //获取请假原因
  const onChangeText = (e) => {
    setgexplain(e.target.value);
  };

  //提交信息
  const submit = () => {
    console.log(zhuTi, startDate, endDateTime, reason, gexplain, file, state);
    request
      .post('/ack/student/addLeave', {
        endDateTime: endDateTime || '', //结束时间
        explain: gexplain || '', //解释
        reason: reason || 1, //点击
        startDateTime: startDate || '', //开始时间
        id: file || 1, //文件ID
        submissionDate: '2021-07-18',
        theme: zhuTi || '', //主题
      })
      .then((res) => {
        console.log('新增请假请求成功', res);
        if (res.message == '新增请假成功') {
          alert('请假成功！');
          history.push('/student/absence/index');
        } else {
          alert(`请假失败${res.message}`);
        }
      })
      .catch((err) => console.log('请假失败', err));
  };

  //重新提交信息
  const againSubmit = () => {
    console.log(zhuTi, startDate, endDateTime, reason, gexplain, file);
    request
      .post('/ack/student/edit', {
        endDateTime: endDateTime || '', //结束时间
        explain: gexplain || '', //解释
        reason: reason || 1, //点击
        startDateTime: startDate || '', //开始时间
        id: file || 1, //文件ID
        submissionDate: '2021-07-18',
        theme: zhuTi || '', //主题
      })
      .then((res) => {
        console.log('编辑请假请求成功', res);
        if (res.message == '编辑成功') {
          alert('编辑成功！');
          history.push('/student/absence/index');
        } else {
          alert('编辑失败！请重新编辑');
        }
      })
      .catch((err) => console.log('编辑请假失败', err));
  };

  //取消返回
  const cancel = () => {
    history.push('/student/absence/index');
  };

  return (
    <div>
      <div>
        学生请假
        <div className="prjName">
          姓名:
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            disabled={true}
            value={student.map((obj) => obj.userName)}
          />
        </div>
        <div className="groupName" style={{ marginLeft: 320 }}>
          学号:
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            disabled={true}
            value={student.map((obj) => obj.account)}
          />
        </div>
        <div className="groupName" style={{ marginLeft: 600 }}>
          院系:
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            disabled={true}
            value={student.map((obj) => obj.dkey)}
          />
        </div>
        <div className="groupName" style={{ marginLeft: 920 }}>
          专业:
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            disabled={true}
            value={student.map((obj) => obj.gkey)}
          />
        </div>
        <div className="prjName" style={{ marginTop: 100 }}>
          年级:
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            disabled={true}
            value={student.map((obj) => obj.gradeKey)}
          />
        </div>
        <div className="groupName" style={{ marginLeft: 320, marginTop: 100 }}>
          班级:
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            disabled={true}
            value={student.map((obj) => obj.name)}
          />
        </div>
        <div className="groupName" style={{ marginLeft: 600, marginTop: 100 }}>
          班主任:
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            disabled={true}
            value={student.map((obj) => obj.teacherName)}
          />
        </div>
      </div>
      {state == '审批不通过' ? (
        <Form>
          <div className="prjName" style={{ marginTop: 190 }}>
            *主题:
            <Input
              style={{
                position: 'absolute',
                bottom: -5,
                width: 1000,
                marginLeft: 12,
              }}
              placeholder={reason1}
              onChange={(e) => setzhuTi(e.target.value)}
            />
          </div>
          <div className="groupName" style={{ marginLeft: 38, marginTop: 260 }}>
            *选择开始日期:&nbsp;&nbsp;&nbsp;
            <Space direction="vertical" size={12}>
              <DatePicker
                onChange={startDateChange}
                placeholder="请选择开始日期"
              />
            </Space>
          </div>
          <div
            className="groupName"
            style={{ marginLeft: 440, marginTop: 260 }}
          >
            *选择结束日期:&nbsp;&nbsp;&nbsp;
            <Space direction="vertical" size={12}>
              <DatePicker
                onChange={endDateChange}
                placeholder="请选择结束日期"
              />
            </Space>
          </div>
          <div className="groupName" style={{ marginLeft: 38, marginTop: 330 }}>
            *请假原因:&nbsp;&nbsp;&nbsp;
            <Radio.Group
              name="radiogroup"
              defaultValue={1}
              onChange={onChangeRadio}
            >
              <Radio name="student" checked={'病假'} value="0">
                病假(需附医院证明)
              </Radio>
              <Radio name="teacher" value="1">
                事假
              </Radio>
              <Radio name="admin" value="2">
                其他
              </Radio>
            </Radio.Group>
            <TextArea rows={4} onChange={onChangeText} placeholder={explain} />
          </div>

          <div className="groupName" style={{ marginLeft: 38, marginTop: 480 }}>
            *相关附件:&nbsp;&nbsp;&nbsp;
            <Upload {...props}>
              <Button icon={<UploadOutlined />}>上传文件</Button>
            </Upload>
          </div>

          <div className="prjName" style={{ marginTop: 580 }}>
            *审批人:
            <Input
              style={{
                position: 'absolute',
                bottom: -5,
                width: 200,
                marginLeft: 12,
              }}
              disabled={true}
              value={student.map((obj) => obj.teacherName)}
            />
          </div>
          <div>
            <Button
              type="primary"
              style={{ marginTop: 650, marginLeft: 45 }}
              onClick={againSubmit}
            >
              确认提交
            </Button>
            <Button style={{ marginTop: 650, marginLeft: 10 }} onClick={cancel}>
              取消
            </Button>
          </div>
        </Form>
      ) : (
        <Form>
          <div className="prjName" style={{ marginTop: 190 }}>
            *主题:
            <Input
              style={{
                position: 'absolute',
                bottom: -5,
                width: 1000,
                marginLeft: 12,
              }}
              placeholder="示例：【陈XX】因病请假1天"
              onChange={(e) => setzhuTi(e.target.value)}
            />
          </div>
          <div className="groupName" style={{ marginLeft: 38, marginTop: 260 }}>
            *选择开始日期:&nbsp;&nbsp;&nbsp;
            <Space direction="vertical" size={12}>
              <DatePicker showTime onChange={startDateChange} />
            </Space>
          </div>
          <div
            className="groupName"
            style={{ marginLeft: 440, marginTop: 260 }}
          >
            *选择结束日期:&nbsp;&nbsp;&nbsp;
            <Space direction="vertical" size={12}>
              <DatePicker showTime onChange={endDateChange} />
            </Space>
          </div>
          <div className="groupName" style={{ marginLeft: 38, marginTop: 330 }}>
            *请假原因:&nbsp;&nbsp;&nbsp;
            <Radio.Group
              name="radiogroup"
              defaultValue={1}
              onChange={onChangeRadio}
            >
              <Radio name="student" checked={'病假'} value="1">
                病假(需附医院证明)
              </Radio>
              <Radio name="teacher" value="2">
                事假
              </Radio>
              <Radio name="admin" value="3">
                其他
              </Radio>
            </Radio.Group>
            <TextArea rows={4} onChange={onChangeText} />
          </div>

          <div className="groupName" style={{ marginLeft: 38, marginTop: 480 }}>
            *相关附件:&nbsp;&nbsp;&nbsp;
            <Upload {...props}>
              <Button icon={<UploadOutlined />}>上传文件</Button>
            </Upload>
          </div>

          <div className="prjName" style={{ marginTop: 580 }}>
            *审批人:
            <Input
              style={{
                position: 'absolute',
                bottom: -5,
                width: 200,
                marginLeft: 12,
              }}
              disabled={true}
              value={student.map((obj) => obj.teacherName)}
            />
          </div>
          <div>
            <Button
              type="primary"
              style={{ marginTop: 650, marginLeft: 45 }}
              onClick={submit}
            >
              确认提交
            </Button>
            <Button style={{ marginTop: 650, marginLeft: 10 }} onClick={cancel}>
              取消
            </Button>
          </div>
        </Form>
      )}
    </div>
  );
};

export default LeaveApplication;
